<template>
    <div>

        <!--        <el-row class="container">
                    &lt;!&ndash;头部&ndash;&gt;
                    <el-col :span="24" class="topbar-wrap">
                        <div class="topbar-title">
                            <img src="../assets/logo-head.png" style="margin-left: 100%;padding-top: 15px;"/>
                        </div>
                        <div class="topbar-account topbar-btn">
                            &lt;!&ndash;  &ndash;&gt;
                            <img src="../assets/person-icon.png" style="vertical-align:middle;cursor: pointer;"
                                 v-on:click="profile"/>
                            <span style="margin-left:10px;vertical-align:middle;">系统管理员</span>
                        </div>
                    </el-col>


                </el-row>

                <div v-show="isShow" class="box-card">
                    <div class="img">
                        <img src="../assets/personinfo-icon.png" style="width: 60px;height: 60px">
                        <p>个人信息</p>
                    </div>
                    <div class="img">
                        <img src="../assets/order-icon.png" style="width: 60px;height: 60px">
                        <p>我的订单</p>
                    </div>
                    <div class="img" @click="editGroup">
                        <img src="../assets/group-icon.png" style="width: 60px;height: 60px">
                        <p>我的群组</p>
                    </div>

                    <div class="img">
                        <img src="../assets/logout-icon.png" style="width: 60px;height: 60px">
                        <p>退出账号</p>
                    </div>
                </div>-->

        <div>
            <Header></Header>
        </div>


        <div class="dashboard-editor-container">


            <panel-group></panel-group>


        </div>

    </div>


</template>


<style scoped lang="scss">


    .dashboard-editor-container {
        padding: 100px;

        background-color: rgb(240, 242, 245);
        .chart-wrapper {
            background: #fff;
            padding: 16px 16px 0;
            margin-bottom: 32px;
        }
    }

    .container {
        position: absolute;
        top: 0px;

        width: 100%;
        .topbar-wrap {
            height: 62px;
            line-height: 40px;
            background: #000000;
            padding: 0px;
            .topbar-btn {
                color: #fff;
            }
            .topbar-logo {
                float: left;
                width: 59px;
                line-height: 26px;
            }
            .topbar-logos {
                float: left;
                width: 120px;
                line-height: 26px;
            }
            .topbar-logo img, .topbar-logos img {
                height: 40px;
                margin-top: 5px;
                margin-left: 2px;
            }
            .topbar-title {
                float: left;
                text-align: left;
                width: 200px;
                padding-left: 10px;
                border-left: 1px solid #000;
            }
            .topbar-account {
                float: right;
                padding-right: 5%;
                padding-top: 15px;
            }
            .userinfo-inner {
                cursor: pointer;
                color: #fff;
                padding-left: 10px;
                /* padding-top: 15px;*/
                font-size: 16px;
            }
        }

        .main {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            position: absolute;
            top: 50px;
            bottom: 0px;
            overflow: hidden;
        }
        aside {
            min-width: 50px;
            background: #333744;
            &::-webkit-scrollbar {
                display: none;
            }
            &.showSidebar {
                overflow-x: hidden;
                overflow-y: auto;
            }
            .el-menu {
                height: 100%; /*写给不支持calc()的浏览器*/
                height: -moz-calc(100% - 80px);
                height: -webkit-calc(100% - 80px);
                height: calc(100% - 80px);
                border-radius: 0px;
                background-color: #333744;
                border-right: 0px;
            }
            .el-submenu .el-menu-item {
                min-width: 60px;
            }
            .el-menu {
                width: 180px;
            }
            .el-menu--collapse {
                width: 60px;
            }
            .el-menu .el-menu-item, .el-submenu .el-submenu__title {
                height: 46px;
                line-height: 46px;
            }
            .el-menu-item:hover, .el-submenu .el-menu-item:hover, .el-submenu__title:hover {
                background-color: #7ed2df;
            }
        }
        .menu-toggle {
            background: #4A5064;
            text-align: center;
            color: white;
            height: 26px;
            line-height: 30px;
        }
        .content-container {
            background: #fff;
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            padding-bottom: 1px;
            .content-wrapper {
                background-color: #fff;
                box-sizing: border-box;
            }
        }
    }

    text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
        color: #ffffff;
        background-color: #000000;
        opacity: 0.7;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 62px;
        z-index: 9999;

    }

    .img {
        display: inline-block;
        margin-left: 139px;
        margin-bottom: 18px;
        margin-top: 10px;
        vertical-align: middle;

    }

    .dlog {
        width: 100%;
        color: #000000;
        //  background-color: #000000;
        opacity: 0.7;
        display: inline-block;
        z-index: 1;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }


</style>

<script>

    import * as types from '../store/types'
    import api from '../axios'
    import PanelGroup from '../pages/order'
    import Header from './Header.vue'

    export default {
        components: {
            PanelGroup,
            Header
        },
        name: 'frame',
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item),
                dialogVisible: true,
                isShow: false,
                user: ''
            }
        },
        mounted() {
            this.getUser();
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            profile: function () {
                this.isShow = !this.isShow;
            },
            getUser() {
                this.user = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {};
            }
        }
    };
</script>